<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$Title$</title>
    <script src="./js/vue.js"></script>
</head>
<style>
    h1{
        color: red;
    }
    .border{
        width: 200px;
        height: 200px;
        border: 1px solid red;
    }
    .font{
        color: gold;
        font-size: 25px;
    }
</style>
<body>
<div id="app">

<h1>vue_if</h1>
    <p v-if="sun">出去玩</p>
    <p v-else>写作业</p>
    <p v-if="age < 18">少年</p>
    <p v-else-if="age >= 18 && age < 30">青年</p>
    <p v-else-if="age >= 30 && age < 60">中年</p>
    <p v-else>老年</p>
 <hr/>


<h1>vue-for</h1>
<!--   数组 第一个 值，第二个 下标-->
    <p v-for="(v,i) in ages">{{i}}.{{v}}</p>
<!--    对象第一 值，第二个 键 ，第三个 下标-->
    <p v-for="(v,k,i) in student">{{i}}.{{k}}:{{v}}</p>

    <p v-for="stu in students">
        <span v-for="(v,k,i) in stu">{{k}}:{{v}} &nbsp; &nbsp; &nbsp;</span>
    </p>
    <hr/>


<h1>属性绑定</h1>
    <a v-bind:href="url">百度以下</a>
    <a :href="url">百度以下</a>
    <input type="text" v-model:value="url">{{url}}
    <hr/>


<h1>事件绑定</h1>
    <button @click="alter()">点击事件</button>
    <p style="background-color: red" @mousemove="time1">
        x:{{x}} y:{{y}}
        <span @mousemove.stop>鼠标移入暂停</span>
    </p>
    <hr/>


<h1>样式绑定</h1>
    <p :class="border">样式绑定</p>
    <p :class="[border,font]">数组样式绑定</p>
    <p :class="{border:true,font:false}">对象样式绑定</p>
    <p :style="bgColor">style</p>
    <hr/>

<h1>全局注册</h1>
    <model1></model1>
<hr/>


<h1>本地注册</h1>
    <model></model>



</div>

<script>

    let model = {
        template: "<div>" +
            "<p>{{title}}</p>" +
            "<button @click='alter()'>点我</button>" +
            "</div>",
        data:function () {
            return{
                title : "提取组件"
            }
        },
        methods:{
            alter:function () {
                alert(this.title);
            }
        }
    }
    Vue.component("model1",{
        template:"<div>" +
            "<p>{{title}}</p>" +
            "<button @click='alter()'>点我</button>" +
            "</div>",
        data: function () {
            return{
                title:"全局组件"
            }
        },
        methods: {
            alter:function () {
                alert(this.title)
            }
        }
    });

    new Vue({
        el: "#app",
        data: {
            sun:true,
            age:18,
            ages:[18,19,20,21],
            student : {name:"wkk",age:18,address:"zz"},
            students :[
                {
                    name:"wkk",
                    age:18
                },

                {
                    name:"zzz",
                    age:19
                }
            ],
            url : "https://www.baidu.com",
            x:0,
            y:0,
            border:"border",
            font: "font",
            bgColor:{
                backgroundColor:"red",
                width:"100px",
                height:"100px"
            }
        },
        components : {"model":model},
        methods:{
            alter : function (){
                alert("点击事件");
            },
            time1:function (event){
                this.x = event.clientX;
                this.y = event.clientY;
            },

        }

    });
</script>
</body>
</html>